<template>
  <div :style="'width:' + width">
    <div class="form-item-label-top">
      <div style="display: flex; align-items: center">
        <span style="color: red; margin-right: 5px" v-if="required">*</span>
        <div style="flex: 1">{{ name }}</div>
      </div>
    </div>

    <el-table :data="data.cmps" stripe border highlight-current-row>
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column label="全称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="简称">
        <template slot-scope="scope">
          {{ scope.row.shortName }}
        </template>
      </el-table-column>
      <el-table-column label="统一税号">
        <template slot-scope="scope">
          {{ scope.row.taxNo }}
        </template>
      </el-table-column>
      <el-table-column width="80px">
        <template slot="header">
          <el-button size="medium" type="text" slot="reference" icon="el-icon-plus" @click="addCompanyVis = true"
            :disabled="disabled"></el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="
            editCompany = scope.row
          editCompanyVis = true
            " :disabled="disabled"></el-button>
          <el-button type="text" icon="el-icon-delete" @click="removeCompany(scope.$index)"
            :disabled="disabled"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="addCompanyVis" width="420px" :title="'新增' + name" :modal-append-to-body="false">
      <el-form label-width="auto" label-position="right">
        <el-form-item :label="name">
          <div style="display: flex">
            <el-select style="flex: 1" v-model="newCompany.id" filterable remote reserve-keyword
              placeholder="请输入（全称/简称/税号..）关键词搜索" :remote-method="getCompanies" :loading="loading"
              :disabled="newCompany.isNew" @input="chooseCompany(newCompany)">
              <el-option v-for="item in companies" :key="item.CMP_ID" :label="item.CMP_Name"
                :value="item.CMP_ID"></el-option>
            </el-select>
            <el-button size="small" v-if="allowNew" :icon="newCompany.isNew ? 'el-icon-minus' : 'el-icon-plus'"
              @click="newCompany.isNew = !newCompany.isNew"></el-button>
          </div>
        </el-form-item>
        <el-form-item label="全称" v-if="newCompany.isNew">
          <el-input style="width: 100%" v-model="newCompany.name" placeholder="请输入公司全称" @input="newCompany.id = null"
            :disabled="newDisable"></el-input>
        </el-form-item>
        <el-form-item label="简称" v-if="newCompany.isNew">
          <el-input style="width: 100%" v-model="newCompany.shortName" placeholder="请输入公司简称"
            @input="newCompany.id = null" :disabled="newDisable"></el-input>
        </el-form-item>
        <el-form-item label="税号" v-if="newCompany.isNew">
          <el-input style="width: 100%" v-if="newCompany.isNew" v-model="newCompany.taxNo" placeholder="请输入统一税号"
            @input="newCompany.id = null" :disabled="newDisable"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addCompany">新增</el-button>
          <el-button type="text" @click="addCompanyVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="editCompanyVis" width="420px" :title="'修改' + name" :modal-append-to-body="false"
      @close="input">
      <el-form label-width="60px" label-position="right" v-if="editCompany">
        <el-form-item :label="name">
          <div style="display: flex">
            <el-select style="flex: 1" v-model="editCompany.id" filterable remote reserve-keyword
              placeholder="请输入（全称/简称/税号..）关键词搜索" :remote-method="getCompanies" :loading="loading"
              :disabled="editCompany.isNew" @input="chooseCompany(editCompany)">
              <el-option v-for="item in companies" :key="item.CMP_ID" :label="item.CMP_Name"
                :value="item.CMP_ID"></el-option>
            </el-select>
            <el-button size="small" v-if="allowNew" :icon="editCompany.isNew ? 'el-icon-minus' : 'el-icon-plus'"
              @click="editCompany.isNew = !editCompany.isNew"></el-button>
          </div>
        </el-form-item>
        <el-form-item label="全称" v-if="editCompany.isNew">
          <el-input style="width: 100%" v-model="editCompany.name" placeholder="请输入公司全称" @input="editCompany.id = null"
            :disabled="newDisable"></el-input>
        </el-form-item>
        <el-form-item label="简称" v-if="editCompany.isNew">
          <el-input style="width: 100%" v-model="editCompany.shortName" placeholder="请输入公司简称"
            @input="editCompany.id = null" :disabled="newDisable"></el-input>
        </el-form-item>
        <el-form-item label="税号" v-if="editCompany.isNew">
          <el-input style="width: 100%" v-if="editCompany.isNew" v-model="editCompany.taxNo" placeholder="请输入统一税号"
            @input="editCompany.id = null" :disabled="newDisable"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getCompanies } from '@/api/flowCenter/field/companySelection'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        cmps: [],
        displayName: '',
      },
      newCompany: {
        id: null,
        name: '',
        shortName: '',
        taxNo: '',
        isNew: false,
      },
      editCompany: null,
      companies: [],
      loading: false,
      newDisable: false,
      addCompanyVis: false,
      editCompanyVis: false,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '公司列表'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '公司列表'
        }
      }
      return '公司列表'
    },
    allowNew() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'allowNew')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
  },
  methods: {
    getCompanies(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCompanies({
          keyword,
        }).then(({ data }) => {
          this.companies = data.Items
          this.loading = false
        })
      }
    },
    chooseCompany(company) {
      let cmp = this.companies.find((x) => x.CMP_ID == company.id)
      company.name = cmp.CMP_Name
      company.taxNo = cmp.CMP_TaxNo
      company.shortName = cmp.CMP_ShortName
    },
    removeCompany(index) {
      this.data.cmps.splice(index, 1)
      this.input()
    },
    addCompany() {
      this.data.cmps.push({ ...this.newCompany })
      this.input()
    },
    input() {
      this.$emit('input', JSON.stringify(this.data))
      if (this.data.cmps) {
        let names = JSON.stringify(this.data.cmps.map((x) => x.name))
        this.data.displayName = names
        this.$emit('display', this.data.displayName)
      }
    },
  },
  mounted: function () {
    if (this.value && Object.keys(this.value).length) {
      this.data = JSON.parse(this.value)
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>